"use client"

import { ProductGallery } from "../../../components/product-gallery"
import { getProductDetailMap } from "../constants/index";
import getSpecifications from "../constants/specifications";
import { getTranslation } from '../../../locales/translations';

const SpecificationTable = ({ specifications, productKey, t, lang }) => {
  return (
    <div className="w-full border border-[#DEDEDE] text-[#606472] rounded-lg">
      {Object.entries(specifications).map(([category, items], categoryIndex) => (
        <div key={categoryIndex} className="flex text-center">
          {/* 左侧分类 */}
          <div className="w-60 border-b border-[#DEDEDE] p-4 flex items-center justify-center">
            {t(`specifications.${category}`)}
          </div>
          {/* 右侧规格内容 */}
          <div className="flex-1 flex-grow border">
            {items.map((item, index) => (
              <div
                key={index}
                className="flex border-b border-[#DEDEDE] last:border-b-0"
              >
                <div className="w-60 px-4 py-3 border-[#DEDEDE] border-r flex items-center justify-center">
                  {t(`specifications.${item.label}`)}
                </div>
                <div className={`flex-1 px-4 py-3 break-all flex items-center justify-center ${lang === 'ar' && "border-r"}`}>
                  {t(`specifications.${productKey}.${item.label}`)}
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};


// 可选：添加一个移动端的紧凑版本
const CompactSpecificationTable = ({ specifications, productKey, t, lang }) => {
  return (
    <div className="w-full space-y-4">
      {Object.entries(specifications).map(([category, items], categoryIndex) => (
        <div key={categoryIndex} className="border border-[#DEDEDE] text-[#606472]  rounded-lg overflow-hidden">
          {/* 分类标题 */}
          <div className="w-full font-medium p-3 text-center border-b">
            {t(`specifications.${category}`)}
          </div>
          {/* 规格内容 */}
          <div className="divide-y divide-gray-200">
            {items.map((item, index) => (
              <div key={index} className="flex justify-between">
                <div className="w-1/2 p-3">
                  {t(`specifications.${item.label}`)}
                </div>
                <div className={`w-1/2 border-l p-3 ${lang === 'ar' && "border-r"}`}>
                  {t(`specifications.${productKey}.${item.label}`)}
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};
export default function ProductDetailView({ productKey, lang }) {
  const t = (key) => getTranslation(key, lang);
  const productDetailMap = getProductDetailMap({ t })
  const productDetailObj = productDetailMap[productKey]
  const specifications = getSpecifications({ productKey });
  return (
    <div className="w-full pb-4 bg-white mx-auto">
      {/* <img className="h-72 w-full" src="https://www.ihome-iot.com/Public/upload/images/2025-01-07/677c8fa6b2801.png" /> */}
      <div className="w-[90rem]] px-4 py-8 overflow-x-auto">
        <div className="flex flex-col w-full md:w-[60rem] justify-between mx-auto space-y-6">
          <ProductGallery
            images={productDetailObj.images}
            title={productDetailObj.title}
            description={productDetailObj.description}
            details={productDetailObj.details}
            thumbnailsToShow={5}
          />
          <div className="bg-white md:bg-[#F5F5F5] md:p-10 rounded-lg space-y-6">
            <p className="font-bold">{t('specifications.productSpecification')}</p>
            {/* 桌面端显示 */}
            <div className="hidden md:block">
              <SpecificationTable lang={lang} productKey={productKey} t={t} specifications={specifications} />
            </div>
            {/* 移动端显示 */}
            <div className="block md:hidden">
              <CompactSpecificationTable lang={lang} productKey={productKey} t={t} specifications={specifications} />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

